<template>
  <div class="smart-report">
    <div class="smart-report-banner">
      <img src="../../assets/images/report-one.png" class="report-book-icon" />
      <div class="smart-report-font">
        <h4>智慧报表</h4>
        <p>
          集成系统数据进行分析、管理、可视化内容呈现，以帮助用户做出明智的业务决策。
        </p>
      </div>
      <div class="screen-link" @click="screenlinkClick">
        <img src="../../assets/images/screen-link.png" />
      </div>
    </div>
    <div class="report-content">
      <div class="report-detail">
        <div class="report-chose">
          <el-form ref="form" :model="form" label-width="120px" size="small">
            <el-row>
              <el-col :span="5">
                <el-form-item label="资产类别：">
                  <el-select
                    v-model="form.propertyCategoryId"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="choseChange"
                    clearable
                  >
                    <el-option
                      v-for="item in pcategoryList"
                      :key="item.propertyCategoryId"
                      :label="item.pcategoryName"
                      :value="item.propertyCategoryId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item label="权属所属：">
                  <el-select
                    v-model="form.ownershipId"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="choseChange"
                    clearable
                  >
                    <el-option
                      v-for="item in dataArr"
                      :key="item.ownershipId"
                      :label="item.ownershipName"
                      :value="item.ownershipId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="所在社区：">
                  <el-select
                    v-model="form.propertyCommunity"
                    placeholder="请选择"
                    style="width: 100%"
                    clearable
                    @change="choseChange"
                  >
                    <el-option
                      v-for="item in communityList"
                      :key="item.areaId"
                      :label="item.areaName"
                      :value="item.areaId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="资产层级：">
                  <el-select
                    v-model="form.propertyLevel"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="levelChange"
                  >
                    <el-option
                      v-for="item in assetHierarchy"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="权证情况：">
                  <el-select
                    v-model="form.propertyWarrantState"
                    placeholder="请选择"
                    style="width: 100%"
                    clearable
                    @change="choseChange"
                  >
                    <el-option
                      v-for="item in propertyWarrantStateList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="资产状态：">
                  <el-select
                    v-model="form.archivingStatus"
                    placeholder="请选择"
                    style="width: 100%"
                    clearable
                    @change="choseChange"
                  >
                    <el-option
                      v-for="item in archivingList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="5" v-if="form.propertyLevel === 2">
                <el-form-item label="资产类型：">
                  <el-select
                    v-model="form.propertyTypeCode"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="choseChange"
                  >
                    <el-option
                      v-for="item in assetTypeList"
                      :key="item.propertyTypeCode"
                      :label="item.propertyTypeName"
                      :value="item.propertyTypeCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" v-if="form.propertyLevel === 2">
                <el-form-item label="资产地块：">
                  <el-select
                    v-model="form.propertyId"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="levelChange"
                  >
                    <el-option
                      v-for="item in propertyList"
                      :key="item.propertyId"
                      :label="item.propertyName"
                      :value="item.propertyId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <h4>表头展示选项</h4>

          <div class="check">
            <el-row>
              <el-col :span="2">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
              </el-col>
            </el-row>
            <el-checkbox-group v-model="checkList">
              <el-row>
                <el-col :span="2">
                  <el-checkbox label="资产地块名称"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 2">
                  <el-checkbox label="资产类型"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 2">
                  <el-checkbox label="栋号/门牌号"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 1">
                  <el-checkbox label="土地性质"></el-checkbox>
                </el-col>
                <el-col :span="2">
                  <el-checkbox label="建筑面积"></el-checkbox>
                </el-col>
                <el-col :span="2">
                  <el-checkbox label="证载面积"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 1">
                  <el-checkbox label="宗地面积"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 2">
                  <el-checkbox label="权属"></el-checkbox>
                </el-col>
                <el-col :span="2">
                  <el-checkbox label="产权人"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 2">
                  <el-checkbox label="管理部门"></el-checkbox>
                </el-col>
                <el-col :span="2">
                  <el-checkbox label="资产类别"></el-checkbox>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2" v-if="form.propertyLevel === 1">
                  <el-checkbox label="权属"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 1">
                  <el-checkbox label="资产类型"></el-checkbox>
                </el-col>
                <el-col :span="2">
                  <el-checkbox label="权证情况"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 2">
                  <el-checkbox label="土地证号"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 2">
                  <el-checkbox label="房产证号"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 2">
                  <el-checkbox label="不动产权号"></el-checkbox>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2" v-if="form.propertyLevel === 2">
                  <el-checkbox label="已租赁面积"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 2">
                  <el-checkbox label="已使用面积"></el-checkbox>
                </el-col>
                <el-col :span="2" v-if="form.propertyLevel === 2">
                  <el-checkbox label="空置面积"></el-checkbox>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <el-checkbox label="所在社区"></el-checkbox>
                </el-col>
                <el-col :span="2">
                  <el-checkbox label="坐落位置"></el-checkbox>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </div>
          <el-row>
            <el-col :span="24" class="search-btn">
              <span @click="searchClick">生成</span>
              <span @click="resetClick">重置</span>
            </el-col>
          </el-row>
        </div>

        <div class="download-report" @click="getWisdomTableExport" v-if="permissions.includes('report:download:disabled')">
          <i class="el-icon-download"></i>下载报告
        </div>
        <div class="report-table" v-if="tableData && tableData.length > 0">
          <!-- 单元 -->
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            class="table-info"
            :row-style="rowState"
            :header-cell-style="headerRowState"
            v-if="form.propertyLevel === 2 && checkList.length > 0"
          >
            <el-table-column label="序号" width="100" align="center">
              <template slot-scope="scope">{{
                (form.pageNum - 1) * form.pageSize + scope.$index + 1
              }}</template>
            </el-table-column>
            <el-table-column
              v-if="tableHead.propertyNameFlag === 1"
              label="资产地块名称"
              align="center"
              prop="propertyName"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.propertyTypeNameFlag === 1"
              prop="propertyTypeName"
              align="center"
              label="资产类型"
            />
            <el-table-column
              v-if="tableHead.dongOrDoorCodeFlag === 1"
              label="栋号/门牌号"
              prop="dongOrDoorCode"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.buildingAreaTotalFlag === 1"
              label="建筑面积"
              align="center"
              prop="buildingAreaTotal"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.registerAreaFlag === 1"
              label="证载面积"
              align="center"
              prop="registerArea"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.ownershipNameFlag === 1"
              label="权属"
              align="center"
              prop="ownershipName"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.propertyOwnerFlag === 1"
              label="产权人"
              align="center"
              prop="propertyOwner"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.manageDeptNameFlag === 1"
              label="管理部门"
              align="center"
              prop="manageDeptName"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.propertyCategoryFlag === 1"
              label="资产类别"
              align="center"
              prop="pcategoryName"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.propertyWarrantStateFlag === 1"
              label="权证情况"
              align="center"
              prop="propertyWarrantState"
            >
              <template slot-scope="scope">
                <span
                  v-if="scope.row.propertyWarrantState === 0"
                  style="color: #d92800"
                  >无两证</span
                >
                <span
                  v-else-if="scope.row.propertyWarrantState === 1"
                  style="color: #258306"
                  >两证齐全</span
                >
                <span
                  v-else-if="scope.row.propertyWarrantState === 2"
                  style="color: #d9a000"
                  >两证不齐</span
                >
              </template>
            </el-table-column>
            <el-table-column
              v-if="tableHead.landCertificateCodeFlag === 1"
              label="土地证号"
              align="center"
              prop="landCertificateCode"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.houseOwnershipCertificateCodeFlag === 1"
              label="房产证号"
              align="center"
              prop="houseOwnershipCertificateCode"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.immovablePropertyCertificateCodeFlag === 1"
              label="不动产权证号"
              align="center"
              prop="immovablePropertyCertificateCode"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.leaseAreaTotalFlag === 1"
              label="已租赁面积"
              align="center"
              prop="leaseAreaTotal"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.usageAreaTotalFlag === 1"
              label="已使用面积"
              align="center"
              prop="usageAreaTotal"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.freeAreaTotalFlag === 1"
              label="空置面积"
              align="center"
              prop="freeAreaTotal"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.propertyCommunityNameFlag === 1"
              label="所在社区"
              align="center"
              prop="propertyCommunityName"
            >
            </el-table-column>
            <el-table-column
              v-if="tableHead.propertyLocationFlag === 1"
              label="坐落位置"
              align="center"
              prop="propertyLocation"
            >
            </el-table-column>
          </el-table>

          <!-- 地块 -->
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            class="table-info"
            :row-style="rowState"
            :header-cell-style="headerRowState"
            v-if="form.propertyLevel === 1 && checkList.length > 0"
          >
            <el-table-column label="序号" width="100" align="center">
              <template slot-scope="scope">{{
                (form.pageNum - 1) * form.pageSize + scope.$index + 1
              }}</template>
            </el-table-column>
            <el-table-column
              v-if="tableMassifHead.propertyNameFlag === 1"
              label="资产地块名称"
              align="center"
              prop="propertyName"
            >
            </el-table-column>
            <el-table-column
              v-if="tableMassifHead.propertyTypeNameFlag === 1"
              prop="propertyTypeName"
              align="center"
              label="资产类型"
            />
            <el-table-column
              v-if="tableMassifHead.buildingAreaTotalFlag === 1"
              label="建筑面积"
              align="center"
              prop="buildingAreaTotal"
            >
            </el-table-column>
            <el-table-column
              v-if="tableMassifHead.registerAreaFlag === 1"
              label="证载面积"
              align="center"
              prop="registerArea"
            >
            </el-table-column>
            <el-table-column
              v-if="tableMassifHead.propertyAncestralLandAreaFlag === 1"
              label="宗地面积"
              align="center"
              prop="propertyAncestralLandArea"
            >
            </el-table-column>
            <el-table-column
              v-if="tableMassifHead.ownershipNameFlag === 1"
              label="权属"
              align="center"
              prop="ownershipName"
            >
            </el-table-column>
            <el-table-column
              v-if="tableMassifHead.landNatureFlag === 1"
              label="产权人"
              align="center"
              prop="propertyOwner"
            >
            </el-table-column>
            <el-table-column
              v-if="tableMassifHead.propertyCategoryFlag === 1"
              label="资产类别"
              align="center"
              prop="pcategoryName"
            >
            </el-table-column>
            <el-table-column
              v-if="tableMassifHead.propertyWarrantStateFlag === 1"
              label="土地性质"
              align="center"
              prop="landNature"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.landNature === 1" style="color: #d92800"
                  >国有出让</span
                >
                <span
                  v-else-if="scope.row.landNature === 2"
                  style="color: #258306"
                  >国有划拨</span
                >
                <span
                  v-else-if="scope.row.landNature === 3"
                  style="color: #d9a000"
                  >集体</span
                >
                <span v-else style="color: #ccc">其他</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="tableMassifHead.propertyWarrantStateFlag === 1"
              label="权证情况"
              align="center"
              prop="propertyWarrantState"
            >
              <template slot-scope="scope">
                <span
                  v-if="scope.row.propertyWarrantState === 0"
                  style="color: #d92800"
                  >无两证</span
                >
                <span
                  v-else-if="scope.row.propertyWarrantState === 1"
                  style="color: #258306"
                  >两证齐全</span
                >
                <span
                  v-else-if="scope.row.propertyWarrantState === 2"
                  style="color: #d9a000"
                  >两证不齐</span
                >
              </template>
            </el-table-column>

            <el-table-column
              v-if="tableMassifHead.propertyCommunityNameFlag === 1"
              label="所在社区"
              align="center"
              prop="propertyCommunityName"
            >
            </el-table-column>
            <el-table-column
              v-if="tableMassifHead.propertyLocationFlag === 1"
              label="坐落位置"
              align="center"
              prop="propertyLocation"
            >
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="form.pageNum"
            :limit.sync="form.pageSize"
            @pagination="getWisdomTablePage"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  wisdomTablePage,
  wisdomTableExport,
  dataList,
  propertyDictList,
  areaList,
  propertyOwnList,
  wisdomPropertyList,
  propertyPcategoryList,
} from "@/api/shops";
import { downloadFn } from "@/common.js";
export default {
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 10,
        propertyCategoryId: "",
        ownershipId: "",
        propertyCommunity: "",
        propertyLevel: 2,
        propertyWarrantState: "",
        archivingStatus: "",
        propertyTypeCode: "",
        propertyId: "",
      },
      pcategoryList: [], // 资产类别
      flag: true,
      total: 0,
      dataArr: [], // 权属
      communityList: [], // 所在社区listareaList
      isIndeterminate: true,
      checkAll: false,
      archivingList: [
        {
          label: "全部",
          value: "",
        },
        { label: "已灭失", value: 1 },
        { label: "未灭失", value: 0 },
      ],
      assetHierarchy: [
        { label: "资产地块", value: 1 },
        { label: "资产单元", value: 2 },
      ],
      propertyWarrantStateList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "无两证",
          value: 0,
        },
        {
          label: "两证齐全",
          value: 1,
        },
        {
          label: "两证不齐",
          value: 2,
        },
      ],
      assetTypeList: [],
      checkList: [],
      tableHead: {
        propertyNameFlag: 0,
        propertyTypeNameFlag: 0,
        dongOrDoorCodeFlag: 0,
        buildingAreaTotalFlag: 0,
        registerAreaFlag: 0,
        ownershipNameFlag: 0,
        propertyOwnerFlag: 0,
        manageDeptNameFlag: 0,
        propertyWarrantStateFlag: 0,
        landCertificateCodeFlag: 0,
        houseOwnershipCertificateCodeFlag: 0,
        immovablePropertyCertificateCodeFlag: 0,
        leaseAreaTotalFlag: 0,
        usageAreaTotalFlag: 0,
        freeAreaTotalFlag: 0,
        propertyCommunityNameFlag: 0,
        propertyLocationFlag: 0,
        propertyCategoryFlag: 0,
      },
      tableMassifHead: {
        propertyNameFlag: 0,
        propertyTypeNameFlag: 0,
        propertyOwnerFlag: 0,
        landNatureFlag: 0,
        buildingAreaTotalFlag: 0,
        registerAreaFlag: 0,
        propertyAncestralLandAreaFlag: 0,
        ownershipNameFlag: 0,
        propertyWarrantStateFlag: 0,
        propertyCommunityNameFlag: 0,
        propertyLocationFlag: 0,
        propertyCategoryFlag: 0,
      },
      tableData: [],
      propertyList: [],
      reportIsShow: false,
    };
  },
  computed: {
    rowState() {
      return {
        color: "#000",
      };
    },
    headerRowState() {
      return "color: #fff;background:#0052D9!important";
    },
    permissions() {
      return this.$store.getters.permissions
    }
  },
  methods: {
    screenlinkClick() {
      window.open(
        "http://lsjkproperty.screen.nanjingxinyong.online/",
        "_blank"
      );
    },
    levelChange() {
      this.tableData = [];
      this.checkList = [];
    },
    resetClick() {
      this.checkList = [];
      this.tableData = [];
      this.form.propertyId = "";
      this.form.propertyTypeCode = "";
      this.form.ownershipId = "";
      this.form.propertyCommunity = "";
      this.form.archivingStatus = "";
      this.form.propertyLevel = 2;
    },
    // 全选
    handleCheckAllChange(val) {
      if (val) {
        if (this.form.propertyLevel === 1) {
          this.checkList = [
            "资产地块名称",
            "土地性质",
            "建筑面积",
            "证载面积",
            "宗地面积",
            "权属",
            "产权人",
            "资产类别",
            "资产类型",
            "权证情况",
            "所在社区",
            "坐落位置",
          ];
        } else if (this.form.propertyLevel === 2) {
          this.checkList = [
            "资产地块名称",
            "资产类型",
            "栋号/门牌号",
            "建筑面积",
            "证载面积",
            "权属",
            "产权人",
            "管理部门",
            "资产类别",
            "权证情况",
            "土地证号",
            "房产证号",
            "不动产权号",
            "已租赁面积",
            "已使用面积",
            "空置面积",
            "所在社区",
            "坐落位置",
          ];
        }
      } else {
        this.checkList = [];
      }

      //  this.checkList = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    searchClick() {
      if (this.checkList.length === 0) {
        this.$message.error("请选择表头");
        return;
      }

      if (this.checkList.length > 0) {
        if (this.form.propertyLevel === 2) {
          if (this.checkList.includes("资产地块名称")) {
            this.tableHead.propertyNameFlag = 1;
          } else {
            this.tableHead.propertyNameFlag = 0;
          }

          if (this.checkList.includes("资产类型")) {
            this.tableHead.propertyTypeNameFlag = 1;
          } else {
            this.tableHead.propertyTypeNameFlag = 0;
          }

          if (this.checkList.includes("栋号/门牌号")) {
            this.tableHead.dongOrDoorCodeFlag = 1;
          } else {
            this.tableHead.dongOrDoorCodeFlag = 0;
          }
          if (this.checkList.includes("建筑面积")) {
            this.tableHead.buildingAreaTotalFlag = 1;
          } else {
            this.tableHead.buildingAreaTotalFlag = 0;
          }

          if (this.checkList.includes("证载面积")) {
            this.tableHead.registerAreaFlag = 1;
          } else {
            this.tableHead.registerAreaFlag = 0;
          }

          if (this.checkList.includes("不动产权号")) {
            this.tableHead.immovablePropertyCertificateCodeFlag = 1;
          } else {
            this.tableHead.immovablePropertyCertificateCodeFlag = 0;
          }

          if (this.checkList.includes("空置面积")) {
            this.tableHead.freeAreaTotalFlag = 1;
          } else {
            this.tableHead.freeAreaTotalFlag = 0;
          }

          if (this.checkList.includes("已使用面积")) {
            this.tableHead.usageAreaTotalFlag = 1;
          } else {
            this.tableHead.usageAreaTotalFlag = 0;
          }

          if (this.checkList.includes("坐落位置")) {
            this.tableHead.propertyLocationFlag = 1;
          } else {
            this.tableHead.propertyLocationFlag = 0;
          }

          if (this.checkList.includes("权属")) {
            this.tableHead.ownershipNameFlag = 1;
          } else {
            this.tableHead.ownershipNameFlag = 0;
          }

          if (this.checkList.includes("产权人")) {
            this.tableHead.propertyOwnerFlag = 1;
          } else {
            this.tableHead.propertyOwnerFlag = 0;
          }

          if (this.checkList.includes("管理部门")) {
            this.tableHead.manageDeptNameFlag = 1;
          } else {
            this.tableHead.manageDeptNameFlag = 0;
          }

          if (this.checkList.includes("资产类别")) {
            this.tableHead.propertyCategoryFlag = 1;
          } else {
            this.tableHead.propertyCategoryFlag = 0;
          }

          if (this.checkList.includes("权证情况")) {
            this.tableHead.propertyWarrantStateFlag = 1;
          } else {
            this.tableHead.propertyWarrantStateFlag = 0;
          }

          if (this.checkList.includes("土地证号")) {
            this.tableHead.landCertificateCodeFlag = 1;
          } else {
            this.tableHead.landCertificateCodeFlag = 0;
          }

          if (this.checkList.includes("房产证号")) {
            this.tableHead.houseOwnershipCertificateCodeFlag = 1;
          } else {
            this.tableHead.houseOwnershipCertificateCodeFlag = 0;
          }

          if (this.checkList.includes("已租赁面积")) {
            this.tableHead.leaseAreaTotalFlag = 1;
          } else {
            this.tableHead.leaseAreaTotalFlag = 0;
          }
          if (this.checkList.includes("所在社区")) {
            this.tableHead.propertyCommunityNameFlag = 1;
          } else {
            this.tableHead.propertyCommunityNameFlag = 0;
          }
        } else if (this.form.propertyLevel === 1) {
          if (this.checkList.includes("资产地块名称")) {
            this.tableMassifHead.propertyNameFlag = 1;
          } else {
            this.tableMassifHead.propertyNameFlag = 0;
          }
          if (this.checkList.includes("资产类型")) {
            this.tableMassifHead.propertyTypeNameFlag = 1;
          } else {
            this.tableMassifHead.propertyTypeNameFlag = 0;
          }
          if (this.checkList.includes("建筑面积")) {
            this.tableMassifHead.buildingAreaTotalFlag = 1;
          } else {
            this.tableMassifHead.buildingAreaTotalFlag = 0;
          }

          if (this.checkList.includes("证载面积")) {
            this.tableMassifHead.registerAreaFlag = 1;
          } else {
            this.tableMassifHead.registerAreaFlag = 0;
          }
          if (this.checkList.includes("土地性质")) {
            this.tableMassifHead.landNatureFlag = 1;
          } else {
            this.tableMassifHead.landNatureFlag = 0;
          }
          if (this.checkList.includes("产权人")) {
            this.tableMassifHead.propertyOwnerFlag = 1;
          } else {
            this.tableMassifHead.propertyOwnerFlag = 0;
          }
          if (this.checkList.includes("资产类别")) {
            this.tableMassifHead.propertyCategoryFlag = 1;
          } else {
            this.tableMassifHead.propertyCategoryFlag = 0;
          }
          if (this.checkList.includes("权属")) {
            this.tableMassifHead.ownershipNameFlag = 1;
          } else {
            this.tableMassifHead.ownershipNameFlag = 0;
          }
          if (this.checkList.includes("权证情况")) {
            this.tableMassifHead.propertyWarrantStateFlag = 1;
          } else {
            this.tableMassifHead.propertyWarrantStateFlag = 0;
          }
          if (this.checkList.includes("所在社区")) {
            this.tableMassifHead.propertyCommunityNameFlag = 1;
          } else {
            this.tableMassifHead.propertyCommunityNameFlag = 0;
          }
          if (this.checkList.includes("坐落位置")) {
            this.tableMassifHead.propertyLocationFlag = 1;
          } else {
            this.tableMassifHead.propertyLocationFlag = 0;
          }
          if (this.checkList.includes("宗地面积")) {
            this.tableMassifHead.propertyAncestralLandAreaFlag = 1;
          } else {
            this.tableMassifHead.propertyAncestralLandAreaFlag = 0;
          }
        }
      }
      // 默认第一页
      this.form.pageNum = 1;
      this.getWisdomTablePage();
    },
    getWisdomPropertyList() {
      let params = {
        pageNum: 1,
        pageSize: 1000,
        ownershipId: this.form.ownershipId,
        propertyCommunity: this.form.propertyCommunity,
        archivingStatus: this.form.archivingStatus,
        propertyCategoryId: this.form.propertyCategoryId,
        propertyTypeCode: this.form.propertyTypeCode,
        propertyWarrantState: this.form.propertyWarrantState,
      };
      wisdomPropertyList(params).then((res) => {
        if (res.code === 200) {
          this.propertyList = res.data;
          this.propertyList.unshift({
            propertyName: "全部",
            propertyId: "",
          });
        }
      });
    },

    getWisdomTablePage() {
      let params = {
        pageNum: this.form.pageNum,
        pageSize: this.form.pageSize,
        propertyCategoryId: this.form.propertyCategoryId,
        ownershipId: this.form.ownershipId,
        propertyCommunity: this.form.propertyCommunity,
        archivingStatus: this.form.archivingStatus,
        propertyTypeCode:
          this.form.propertyLevel === 2
            ? this.form.propertyTypeCode
            : undefined,
        propertyLevel: this.form.propertyLevel,
        tableHead:
          this.form.propertyLevel === 2 ? this.tableHead : this.tableMassifHead,
        propertyId: this.form.propertyId,
        propertyWarrantState: this.form.propertyWarrantState,
      };
      this.flag = false;
      this.loading = this.$loading({
        lock: true,
        text: "正在生成报表",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      wisdomTablePage(params).then((res) => {
        if (res.code === 200) {
          this.flag = true;
          this.loading.close();
          this.tableData = res.rows;
          this.total = res.total;
        }
      });
    },
    // 下载报告
    getWisdomTableExport() {
      console.log("this.checkList", this.checkList);
      if (this.checkList.length === 0) {
        this.$message.error("请选择表头信息并生成报表");
        return;
      }
      let params = {
        pageNum: 1,
        pageSize: 1000,
        ownershipId: this.form.ownershipId,
        propertyCategoryId: this.form.propertyCategoryId,
        propertyCommunity: this.form.propertyCommunity,
        archivingStatus: this.form.archivingStatus,
        propertyTypeCode:
          this.form.propertyLevel === 2
            ? this.form.propertyTypeCode
            : undefined,
        propertyLevel: this.form.propertyLevel,
        tableHead:
          this.form.propertyLevel === 2 ? this.tableHead : this.tableMassifHead,
        propertyId: this.form.propertyId,
        propertyWarrantState: this.form.propertyWarrantState,
      };
      this.loading = this.$loading({
        lock: true,
        text: "正在导出报表",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      wisdomTableExport(params).then((res) => {
        if (res.code === 200) {
          this.loading.close();
          downloadFn(res.msg);
        }
      });
    },
    choseChange() {
      this.getWisdomPropertyList();
      if (this.tableData.length > 0) {
        // this.getWisdomTablePage();
      }
    },
    getPropertyOwnList() {
      propertyOwnList().then((res) => {
        this.dataArr = res.data;
        this.dataArr.unshift({
          ownershipName: "全部",
          ownershipId: "",
        });
      });
    },
    getPropertyPcategoryList() {
      propertyPcategoryList().then((res) => {
        this.pcategoryList = res.data;
        this.pcategoryList.unshift({
          pcategoryName: "全部",
          propertyCategoryId: "",
        });
      });
    },
    // 所在社区
    getAreaList() {
      let params = {
        areaName: "",
        parentId: "",
      };
      areaList(params).then((res) => {
        this.communityList = res.data;
        this.communityList.unshift({
          areaName: "全部",
          areaId: "",
        });
      });
    },
    getDataList() {
      let params = {
        businessNature: "",
        leaseFlag: "",
      };
      propertyDictList(params).then((res) => {
        if (res.code === 200) {
          this.assetTypeList = res.data;
          this.assetTypeList.unshift({
            propertyTypeName: "全部",
            propertyTypeCode: "",
          });
        }
      });
    },
    reportClick() {
      const loading = this.$loading({
        lock: true,
        text: "正在生成报告",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        loading.close();
        this.reportIsShow = true;
      }, 2000);
    },
  },
  mounted() {
    this.getPropertyOwnList();
    this.getPropertyPcategoryList();
    this.getAreaList();
    this.getDataList();
    this.getWisdomPropertyList();
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.smart-report {
  height: calc(100vh - 73px);
  .smart-report-banner {
    height: 240px;
    width: 100%;
    background-size: cover;
    background-image: url("../../assets/images/report-two.png");
    background-repeat: no-repeat;
    position: relative;
    .screen-link {
      position: absolute;
      top: 24px;
      left: 27px;
      height: 48px;
      cursor: pointer;
      img {
        height: 100%;
      }
    }
    .report-book-icon {
      position: absolute;
      top: 38px;
      right: 15px;
      height: 230px;
      width: 280px;
      z-index: 2;
      &img {
        width: 100%;
      }
    }
    .smart-report-font {
      text-align: center;
      h4 {
        font-size: 55px;
        line-height: 64px;
        width: 220px;
        height: auto;
        background: linear-gradient(239deg, #6d47ff 0%, #00c4df 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0 auto 20px;
        padding-top: 60px;
      }
      p {
        font-size: 16px;
        color: #556268;
      }
    }
    .report-input {
      width: 42.6%;
      margin: 56px auto 0;
    }
  }
  .report-content {
    overflow: auto;
    height: calc(100vh - 285px);
    .set-content {
      margin-left: 10%;
    }
    .report-detail {
      width: 98%;
      height: auto;
      background-color: #fff;
      margin: 0 auto 20px;
      box-shadow: 0px 0px 10px #e5e5e5;
      padding: 20px;
      .report-chose {
        width: 100%;
        height: auto;
        background: #fafafa;
        padding: 20px 0;
        .check {
          padding-left: 33px;
        }
        .search-btn {
          display: flex;
          justify-content: flex-end;
          padding-right: 25px;
          cursor: pointer;

          span {
            &:nth-child(1) {
              @include searchBtn;
              height: 32px;
              line-height: 32px;
              width: 70px;
            }

            &:nth-child(2) {
              @include resetBtn;
              height: 32px;
              line-height: 32px;
              width: 70px;
            }
          }
        }
        h4 {
          margin: 0;
          padding-left: 33px;
        }
      }
      .download-report {
        padding: 20px 0;
        color: #0052d9;
        font-weight: 600;
        cursor: pointer;
        text-decoration: underline;
        display: inline-block;
      }
      h3 {
        font-size: 45px;
        text-align: center;
        margin: 0;
        font-weight: 500;
      }
      .report-chart {
        display: flex;
        justify-content: space-evenly;
        width: 99%;
        margin: 30px auto;
        p {
          padding: 0 15px;
        }
        .report-chart-left {
          width: 47%;
          height: 180px;
          background: #f7f9fa;
          border: 1px solid #edeef0;
          border-radius: 5px;
          .firms {
            width: 120px;
            margin: 0 auto;
            display: block;
          }
        }
        .report-chart-right {
          width: 47%;
          height: 180px;
          background: #f7f9fa;
          border: 1px solid #edeef0;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.smart-report {
  .checkout-item {
    .el-checkbox {
      width: 160px;
    }
  }
  .el-checkbox {
    margin-top: 25px;
  }
  .el-checkbox__label {
    font-size: 14px !important;
    color: #606266;
  }
  .el-input-group__prepend {
    height: 46px;
    width: 115px;
  }
  .el-input--medium .el-input__inner {
    height: 46px;
    line-height: 46px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
}
</style>
